<template>
  <div id="track">
    <el-tabs v-model="activeName">
      <el-tab-pane label="轨迹图" name="second">
        <trajectory></trajectory>
      </el-tab-pane>
      <el-tab-pane label="时间轴" name="third">
        <timeBase></timeBase>
      </el-tab-pane>
      <el-tab-pane label="时间表" name="fourth">
        <timeTable></timeTable>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import timeBase from './timeBase.vue'//时间轴
import trajectory from './trajectory.vue' //轨迹图
import timeTable from './timeTable.vue'

export default {
  name: "track",
  data() {
    return {
      activeName: "second",
      params: {},
      data: []
    };
  },

  beforeCreate() {
  },

  created() {
    // console.log("dd");
    // this.loadData();
  },
  mounted() {
    this.params = this.$store.getters.getData;
    // console.log("轨迹图父组件", this.params);
    this.loadData();
    // function changeMobsfIframe() {
    //   const mobsf = document.getElementById('mobsf');
    //   const deviceWidth = document.body.clientWidth;
    //   const deviceHeight = document.body.clientHeight;
    //   mobsf.style.width = (Number(deviceWidth) - 120) + 'px'; //数字是页面布局宽度差值
    //   mobsf.style.height = (Number(deviceHeight) - 80) + 'px'; //数字是页面布局高度差
    // }
    // changeMobsfIframe()
    //
    // window.onresize = function () {
    //   changeMobsfIframe()
    // }

  },
  methods: {
    // 获取轨迹图、时间轴、时间表数据
    loadData() {
      var handler = new this.HttpHandler("BP.WF.HttpHandler.WF_WorkOpt_OneWork");
      handler.AddJson(this.params);
      var data = handler.DoMethodReturnString("Chart_Init");
      if (data.includes('err@')) {
        this.$message.error(data)
        return;
      }
      console.log('获取轨迹图数据', data);
      this.data = JSON.parse(data);
      this.$store.commit('setTrack', this.data) //设置数据
      console.log('获取vuex', this.$store.getters.getTrack);
      setTimeout(() => {
        this.$Bus.$emit("track")
      }, 500);
    }
  },

  //监听
  computed: {},

  components: {
    timeBase,
    trajectory,
    timeTable
  },

  //监听后执行动作
  watch: {}
};
</script>

<style lang="less" scoped>
</style>
